<template>
  <div class="noticeDetail">
    <el-card shadow="never" style="margin-top: 30px">
      <div class="header">
        <div class="page-header">
          <el-page-header @back="goBack" content="公告详情" style="margin-bottom: 20px">
          </el-page-header>
        </div>
      </div>

      <el-form ref="notice" :model="notice" label-width="80px">
        <el-form-item label="公告标题">
          <el-input v-model="notice.noticeTitle"></el-input>
        </el-form-item>
        <el-form-item label="发布时间">
          <el-input v-model="notice.annceTime" :disabled="true">
          </el-input>
        </el-form-item>
        <el-form-item label="公告内容">
          <div style="border: 1px solid #ccc;">
            <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :defaultConfig="toolbarConfig"
                :mode="mode"
            />
            <Editor
                style="height: 500px; overflow-y: hidden;"
                v-model="notice.noticeContent"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="onCreated"
            />
          </div>
          <div style="display: flex; justify-content:flex-end;   margin-top: 20px">
            <el-button type="warning" @click="updateNotice" >修改公告</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {getNoticeById, updateNotice} from "@/api/allApi";
import {Editor,Toolbar} from '@wangeditor/editor-for-vue'
import moment from "moment/moment";

export default {
  name: "NoticeDetail",
  components: {Editor,Toolbar},
  data() {
    return {
      notice: {},
      editor: null,
      toolbarConfig: {},
      editorConfig: {
        placeholder: '请输入内容...',
      },
      mode: 'simple', // or 'simple'
    }
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    getNoticeById() {
      getNoticeById(
          this.$route.params.noticeId
      ).then(res => {
        this.notice = res.data.data
        // 修改表单时间
        this.notice.annceTime = moment(this.notice.annceTime).format("YYYY-MM-DD HH:mm:ss")
      })
    },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      this.toolbarConfig.excludeKeys = [
        'group-video'
      ]
    },
    updateNotice() {
      if (this.editor.getText()) {
        this.$confirm('确定修改该公告吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            // 获取不带html标签的纯文本，存入数据库作为摘要
            this.notice.noticeDigest = this.editor.getText()
            this.notice.annceTime = ''
            updateNotice(this.notice).then(res=>{
              if (res.data.success){
                this.$message.success(res.data.data)
              }else{
                this.$message.error(res.data.data)
              }
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }else {
        this.$message.error("公告内容不能为空！")
      }

    }
  },
  mounted() {
    this.getNoticeById()
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>

<style lang="less" scoped>
  .header {
    display: flex;
    justify-content: space-between;

    .page-header {
      width: 20%;
    }
  }

</style>